<template>
  <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-secondary-800 border-t border-gray-200 dark:border-secondary-700 shadow-lg z-50 md:hidden">
    <div class="flex items-center justify-around h-16 px-2" style="padding-bottom: env(safe-area-inset-bottom, 0);">
      <router-link 
        to="/" 
        class="flex flex-col items-center justify-center w-full h-full text-secondary-500 dark:text-secondary-400"
        :class="{ 'text-primary-600 dark:text-primary-400': isActive('/') }"
      >
        <el-icon class="text-xl mb-1"><House /></el-icon>
        <span class="text-xs">首页</span>
      </router-link>
      
      <router-link 
        to="/templates/showcase" 
        class="flex flex-col items-center justify-center w-full h-full text-secondary-500 dark:text-secondary-400"
        :class="{ 'text-primary-600 dark:text-primary-400': isActive('/templates') }"
      >
        <el-icon class="text-xl mb-1"><Picture /></el-icon>
        <span class="text-xs">模板</span>
      </router-link>
      
      <router-link 
        to="/workflow/list" 
        class="flex flex-col items-center justify-center w-full h-full text-secondary-500 dark:text-secondary-400"
        :class="{ 'text-primary-600 dark:text-primary-400': isActive('/workflow') }"
      >
        <el-icon class="text-xl mb-1"><Management /></el-icon>
        <span class="text-xs">工作流</span>
      </router-link>
      
      <router-link 
        to="/artworks" 
        class="flex flex-col items-center justify-center w-full h-full text-secondary-500 dark:text-secondary-400"
        :class="{ 'text-primary-600 dark:text-primary-400': isActive('/artworks') }"
      >
        <el-icon class="text-xl mb-1"><PictureFilled /></el-icon>
        <span class="text-xs">作品</span>
      </router-link>
      
      <router-link 
        to="/user/profile" 
        class="flex flex-col items-center justify-center w-full h-full text-secondary-500 dark:text-secondary-400"
        :class="{ 'text-primary-600 dark:text-primary-400': isActive('/user') }"
        v-if="false"
      >
        <el-icon class="text-xl mb-1"><User /></el-icon>
        <span class="text-xs">我的</span>
      </router-link>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { House, Picture, Management, User, PictureFilled } from '@element-plus/icons-vue';

const route = useRoute();

// 检查当前路由是否激活
const isActive = (path: string) => {
  return route.path.startsWith(path);
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/responsive.scss' as responsive;

.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 12px;
  text-decoration: none;
  padding: 8px 0;
  flex: 1;
  transition: color 0.3s;
  
  &.active {
    color: var(--el-color-primary);
  }
  
  .el-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }
  
  span {
    line-height: 1;
  }
}
</style> 